import React, { Component } from "react";
import store from "../../redux/store";

/**
 * 
    Store 调用 dispatch() 分发 action 给 Reducers 执行
        action ：
           - 表示动作的对象，包含 2 个属性
           - type：标识属性，值为字符串，唯一，必须属性
           - data：数据属性，类型任意，可选属性
           - { type: "add", data: 1 }
    Reducers 接收 prevState 、action 两个参数，对状态进行加工后返回新状态
        - prevState为上一次的State，首次调用为undefined，所以可以设置默认值
    Store 调用 getState() 获取状态
        - store.getState() ：获取状态
        - store.dispatch(action) ：分发任务，触发 reducer 调用，产生新状态
        - store.subscribe(func) ：注册监听函数，当状态改变自动调用
 */

export default class Count extends Component {
  add = () => {
    store.dispatch({ type: "add", data: 1 });
  };
  delete = () => {
    store.dispatch({ type: "delete", data: 1 });
  };
  ayncAdd = () => {
    setTimeout(() => {
      store.dispatch({ type: "add", data: 2 });
    }, 2000);
  };
  render() {
    console.log(store.getState());
    return (
      <div>
        Count的值：{store.getState()}
        <hr></hr>
        <button onClick={this.add}>+</button>
        <button onClick={this.delete}>-</button>
        <button onClick={this.ayncAdd}>异步＋2</button>
      </div>
    );
  }
}
